<template>
    <div>
        <p class="perrightwdzl">我的资料</p>
            <div class="perform">
                <form action>
                    <div class="input-box">
                    <input
                        type="button"
                        value="男士"
                        @click="mabtn"
                        class="sexbtn"
                        :class="{active:userd.sex=='男'}"
                        
                    > 
                    <input
                        type="button"
                        value="女士"
                        @click="febtn"
                        class="sexbtn"
                        :class="{active:userd.sex=='女'}"
                    >
                    <div style="height:30px;width:0px"></div>
                    </div>
                    <div class="input-box">
                    昵称
                    <input type="text" class="inputf" :readonly="isreadonly" v-model="userd.name">
                    </div>
                    <div class="input-box">
                    密码
                    <input type="password" class="inputf" :readonly="isreadonly" v-model="userd.password">
                    </div>
                    <div class="input-box">
                    手机
                    <input type="text" class="inputf" :readonly="isreadonly" v-model="userd.phone">
                    </div>
                    <div class="input-box">
                    邮箱
                    <input type="text" class="inputf" :readonly="isreadonly"  v-model="userd.email">
                    </div>
                    <div class="input-box">
                    <input type="button" value="保存" class="mytb" @click="save">
                    <input type="button" value="修改" class="mytb mytb2" @click="isreadonly=false">
                    </div>
                </form>
            </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
      sexflag: false,
      isreadonly:true,
      userd:{
        uid:"123",       
        phone:"",
        password:"",
        email:"",
        sex:"",
        name:""
      }
    };
  },
  methods: {
    mabtn() {
      if(!this.isreadonly){
        this.userd.sex = "男";
      }
      
    },
    febtn(){
      if(!this.isreadonly){
        this.userd.sex='女'
      }
    },
    save(){
      if(!this.isreadonly){
        this.axios({
          method:"put",
          url:"http://localhost:3000/users/",
          data:this.userd
        }).then(res=>{
          alert("ok")
        })
      }
    }
  },
  mounted() {
    this.axios({
      // url:`http://localhost:3000/users/${this.userd.uid}`,
      url:`http://localhost:3000/users`
    }).then(res=>{
      this.userd=res.data;
    })
  }
}
</script>
<style  scoped>
.perrightwdzl {
  margin-top: 13px;
}
.input-box {
  margin-top: 20px;
}
.mytb {
  background-color: #b49d7e;
  width: 50px;
  height: 30px;
  border: 0;
  color: #fffefe;
  font-size: 12px;
  float: left;
}
.mytb2 {
  margin-left: 20px;
}
.sexbtn {
  width: 50px;
  height: 30px;
  border: 0;
  color: #000;
  outline: none;
  float: left;
}
.sexbtn.active {
  background-color: #b49d7e;
  color: #fffefe;
}
.perform {
  font-size: 12px;
  line-height:1em;
}
.inputf {
  display: block;
  height: 50px;
  width: 380px;
  outline: none;
  border: 1px #ccc solid;
  padding-left: 10px;
  background-color: #f2f2f2;
  margin-top: 6px;
}
</style>
